<template>
	<view class="homebox">

		<view v-if="pageFlag=='member'" class="studenthome">
			<view class="headerbg">
				<view class="anquan">

				</view>

				<view class="title" style="">
					首页
				</view>
				<view class="homebox">
					<!-- 搜索框 -->
					<view class="searchbox" @click="gotostudentSearch">
						<u-icon label="请输入搜索词" size="30" name="search"></u-icon>
						<text class="searchtext"> 搜索</text>
					</view>
					<scroll-view scroll-y="true" class="scroll-Y" style="height: 1300rpx; margin-top: 30rpx;">
						<view class="selectTeacher">
							<view class="title">
								已选择导师
							</view>
							<!-- 未选择导师 -->
							<view v-if="selectedTeacherData.length>0" class="selectitem">
								<scroll-view class="selectedTearch" scroll-x="true" scroll-left="0">
									<view class="selectitemone" v-for="(item,index) in selectedTeacherData"
										:key="index">
										<view class="imgbox">
											<image class="imgboximg" :src="item.teacher.photos.url"></image>
										</view>

										<view class="itemmessage">
											<view class="name">
												<text class="nameleft">{{item.teacher.name}}</text>
												<text v-if="item.status==0" class="leibie">待确认</text>
												<text v-if="item.status==1" class="leibie">已确认</text>
												<!-- <text
													class="leibie">{{item.teacher.category_text != null ? item.teacher.category_text :''}}</text> -->
													
											</view>
											<view class="introduction">
												{{item.teacher.brief_introduction}}
											</view>
											<view class="science">
												<view class="scienceitem"
													v-for="(subitem,index) in item.teacher.science_ids_text"
													:key="index">
													{{subitem}}
												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view v-else class="selectitem">
								<view class="kongingbox">
									<image class="noselectimg"
										src="http://sssx.nanjingyunpeng.cn/uploads/tupian/image/noselect.png"></image>
								</view>
								<view class="mesaage">
									<!-- 南院/物理系/研2班 -->
									{{mystudentData.school}}/{{mystudentData.science_id_text}}
								</view>
							</view>
						</view>

						<!-- tabs切换栏 -->
						<scroll-view class="scroll-view_Hs" scroll-x="true" scroll-left="0">
							<view class="itemone" v-for="(item,index) in tabsDatastudent" :key="index">
								{{item.name}}
							</view>
						</scroll-view>

						<!-- 导师列表 -->
						<view class="tearchList">
							<view class="tearchListitem" v-for="(item,index) in tearchData" :key="item.id"
								@click="gotoTeacherdetail(item.id)">
								<view class="imgbox">
									<image class="tearchtimg" :src="item.photos.url"></image>
								</view>
								<view class="messagebox">
									<view class="name">
										{{item.name}}
									</view>
									<view class="zhicheng">
										{{item.category_text}}
									</view>
									<!-- <view class="">
										<view class="zhichengitem" v-for="(subitem,subindex) in item.science_ids_text"
											:key="subindex">
											{{subitem}}
										</view>
									</view> -->
									<scroll-view class="" scroll-x="true">
										<view class="zhichengitem" v-for="(subitem,subindex) in item.science_ids_text"
											:key="subindex">
											{{subitem}}
										</view>
									</scroll-view>
								</view>

							</view>
							
						</view>
						<view class="" style="height: 100rpx;"></view>

					</scroll-view>

				</view>

			</view>
		</view>

		<view v-if="pageFlag=='teacher'" class="teacherhome">
			<view class="headerbg">
				<view class="title">
					首页
				</view>
				<view class="searchbox" @click="gotoSearch">
					<u-icon label="请输入搜索词" size="30" name="search"></u-icon>
					<text class="searchtext"> 搜索</text>
				</view>
				<!-- <view class="" style="height: 270rpx;"></view> -->
				<scroll-view scroll-y="true" class="homestudentbox" style="height: 1160rpx; margin-top: 30rpx;">
					<!-- <view class="homestudentbox"> -->
					<view v-if="selectedStudent.length == 0" class="selectStudent">
						<view class="title" style="padding-left: 0rpx;">
							已选择学生 (0/2)
						</view>
						<!-- 未选择导师 -->
						<view class="selectitem">
							<view class="kongingbox">
								<image class="noselectimg"
									src="http://sssx.nanjingyunpeng.cn/uploads/tupian/image/noselect.png"></image>
							</view>
							<view class="mesaage">
								暂未选择学生
							</view>
						</view>
					</view>
					<view v-else class="selectStudent">
						<view class="title" style="padding-left: 0rpx;">
							已选择学生 <text>(</text> {{teacherNum.is_num}} <text>/{{teacherNum.num}})</text>
						</view>
						<view class="">
							<scroll-view class="selectedStudentscroll-view" scroll-x="true" scroll-left="0">
								<view class="selecteditem" v-for="(item,index) in selectedStudent"
									@click="gotoStudentdetail(item.id)">
									<view class="itemleft">
										<view class="avaterbox">
											<image class="avatartimg" :src="item.student.photos.url"></image>
										</view>
										<view class="nameandmessage">
											<view class="name">
												{{item.student.name}}
											</view>
											<view class="message">
												{{item.student.school}}/{{item.student.speciality}}
											</view>
										</view>
									</view>

									<view class="itemright">
										<view class="baokao">
											报考：
										</view>
										<view class="">
											{{item.student.science_id_text}}
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<!-- tabs切换栏 -->
					<view class="">
						<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
							<view class="itemone" :class="currIndex == index ? 'itemoned' : ''"
								v-for="(item,index) in tabsData" @click="handlebg(item,index)">
								{{item.name}}
							</view>
						</scroll-view>
					</view>

					<view class="studentbox" style="height: 740rpx; margin-top: 30rpx;">
						<view class="boxitem" v-for="(item,index) in studentData" :key="item.id"
							@click="gotoStudentdetail(item.id)">
							<view class="itemleft">
								<view class="avaterbox">
									<image class="avatartimg" :src="item.photos.url"></image>
								</view>
								<view class="nameandmessage">
									<view class="name">
										{{item.name}}
									</view>
									<view class="message">
										{{item.school}}/{{item.speciality}}
									</view>
								</view>
							</view>

							<view class="itemright">
								<view class="baokao">
									报考：
								</view>
								<view class="">
									{{item.science_id_text}}
								</view>
							</view>
						</view>
						<view v-if="!kongFlag" class="">
							<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text='暂无该专业学生'>
							</u-empty>
						</view>
					</view>
					<!-- <view class="" style="height: 00rpx;">

					</view> -->
					<!-- </view> -->
				</scroll-view>
			</view>

		</view>
	</view>



	</view>
</template>

<script>
	import {
		getTeacherList,
		getpersonal,
		selectedteacher,
		usermessage,
		science,
		getStudentList,
		selectedstudent,
		teacherCurrent
	} from "../../api/api.js"
	export default {
		data() {
			return {
				pageFlag: '',
				tabsDatastudent: [],
				tearchData: [],
				selectedTeacherData: [],
				currIndex: 0,
				tabsData: [],
				studentData: [],
				Id: "", //专业id
				selectedStudent: [],
				studentList: [{
						name: "司蒙蒙",
						photos: {
							url: 'https://sssx.nanjingyunpeng.cn/uploads/images/20230526/4e0c7309e8a4cdddb39e3ae422a01674.png'
						},
						school: '郑州工业应用技术学院',
						science_id_text: '电子商务',
						speciality: '计算机3333333333333333',
					},
					{
						name: "司蒙蒙",
						photos: {
							url: 'https://sssx.nanjingyunpeng.cn/uploads/images/20230526/4e0c7309e8a4cdddb39e3ae422a01674.png'
						},
						school: '郑州工业应用技术学院',
						science_id_text: '电子商务',
						speciality: '计算机',
					},
					{
						name: "司蒙蒙",
						photos: {
							url: 'https://sssx.nanjingyunpeng.cn/uploads/images/20230526/4e0c7309e8a4cdddb39e3ae422a01674.png'
						},
						school: '郑州工业应用技术学院',
						science_id_text: '电子商务',
						speciality: '计算机',
					},
					{
						name: "司蒙蒙",
						photos: {
							url: 'https://sssx.nanjingyunpeng.cn/uploads/images/20230526/4e0c7309e8a4cdddb39e3ae422a01674.png'
						},
						school: '郑州工业应用技术学院',
						science_id_text: '电子商务',
						speciality: '计算机11111111111111',
					},
					{
						name: "司蒙蒙",
						photos: {
							url: 'https://sssx.nanjingyunpeng.cn/uploads/images/20230526/4e0c7309e8a4cdddb39e3ae422a01674.png'
						},
						school: '郑州工业应用技术学院',
						science_id_text: '电子商务',
						speciality: '计算机',
					},
					{
						name: "司蒙蒙",
						photos: {
							url: 'https://sssx.nanjingyunpeng.cn/uploads/images/20230526/4e0c7309e8a4cdddb39e3ae422a01674.png'
						},
						school: '郑州工业应用技术学院',
						science_id_text: '电子商务',
						speciality: '计算机11111111111',
					},
					{
						name: "司蒙蒙",
						photos: {
							url: 'https://sssx.nanjingyunpeng.cn/uploads/images/20230526/4e0c7309e8a4cdddb39e3ae422a01674.png'
						},
						school: '郑州工业应用技术学院',
						science_id_text: '电子商务',
						speciality: '计算机',
					}
				],
				mystudentData: {},
				kongFlag: false,
				teacherNum: {},
				PageInfo:{
					page: 1,
					size: 10,
				},
			}
		},
		onLoad() {
			let token = uni.getStorageSync('token')
			if (token) {
				this.getusermessage()
				console.log("111111111111", token)
			} else {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
			this.teacherCurrents()
			this.getTeacherList()
			this.selectedteachers()
			this.getpersonals()
			this.getscience()
			this.selectedstudents()
			
			  const systemInfo = uni.getSystemInfoSync();
			  const navigationBarHeight = systemInfo.screenHeight - systemInfo.windowHeight;
			  const tabsHeight = navigationBarHeight - systemInfo.statusBarHeight;
			  
			  console.log('底部tabs的高度：', tabsHeight);
 
			// uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			this.PageInfo.page = 1
			console.log('refresh刷新刷新');
			if (this.pageFlag == 'member') {
				this.tearchData =[]
				this.selectedTeacherData=[]
				this.getTeacherList()
				this.selectedteachers()
				this.getpersonals()
				this.getusermessage()
				this.teacherCurrents()
			} else {
				this.selectedStudent = []
				this.studentData = []
				this.getusermessage()
				// this.getscience()
				this.selectedstudents()
				this.getStudentLists()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		onReachBottom(){
		    // 页码加1
		    this.PageInfo.page ++
		    //再次调用方法，通过数组合并，实现分页加载功能，
			if(this.pageFlag =='teacher'){
				this.getStudentLists()
				console.log("老师分页加载")
			}else{
				this.getTeacherList()
				console.log("学生分页加载")
			}
		},

		methods: {
			async teacherCurrents() {
				let res = await teacherCurrent()
				console.log("老师当前信息", res)
				this.teacherNum = {
					is_num: res.data.is_num,
					num: res.data.num
				}
			},
			async getusermessage() {
				let res = await usermessage()
				console.log("当前用户信息", res)
				if(res.data.lock ==1 && res.data.identity == 'teacher'){
					uni.redirectTo({
						url:"/pages_teachers/perfect/index"
					})
					return
				}
				if(res.data.lock ==1 && res.data.identity == 'member'){
					uni.redirectTo({
						url:"/pages_students/perfect/index"
					})
					return
				}
				this.pageFlag = res.data.identity
			},
			async getTeacherList() {
				let res = await getTeacherList({
					page: this.PageInfo.page,
					size: this.PageInfo.size
				})
				if (res.code == 1) {
					// this.tearchData = res.data
					this.tearchData = [...this.tearchData,...res.data]
					this.tearchData.forEach((item, index) => {
						item.science_ids_text = item.science_ids_text.split(",")
					})
					console.log("导师列表", this.tearchData)
				}
			},
			async selectedteachers() {
				let res = await selectedteacher()
				if (res.code == 1) {
					this.selectedTeacherData = res.data
					this.selectedTeacherData.forEach((item, index) => {
						item.teacher.science_ids_text = item.teacher.science_ids_text.split(",")
					})
					console.log("已选择老师", this.selectedTeacherData)
				}
			},
			async getpersonals() {
				// this.this.mystudentData = {}
				let res = await getpersonal()
				if (res.code == 1) {
					console.log("学生信息", res)
					// this.tabsDatastudent.push({
					// 	name: res.data.science_id_text
					// })
					this.tabsDatastudent[0] = {
						name:res.data.science_id_text
					}
					this.mystudentData = {
						school: res.data.school,
						science_id_text: res.data.science_id_text
					}
					console.log("this.studentData", this.mystudentData,this.tabsDatastudent)

				}
			},

			gotostudentSearch() {
				uni.navigateTo({
					url: '../../pages_students/search/index',
				})
			},
			gotoTeacherdetail(id) {
				console.log("333")
				uni.navigateTo({
					url: `../../pages_students/teacherDetail/index?id=${id}`,
					// url:""
				})
			},
			handlebg(item, index) {
				console.log("item", item)
				this.currIndex = index
				this.Id = item.id
				this.studentData = []
				this.getStudentLists()
			},
			async selectedstudents() {
				let res = await selectedstudent()
				if (res.code == 1) {
					console.log("已选学生", res)
					this.selectedStudent = res.data
					

				}
			},

			async getscience() {
				let res = await science()
				if (res.code == 1) {
					console.log("专业列表", res)
					this.tabsData = res.data
					this.Id = res.data[0].id
					console.log("专业id", this.Id)
					this.getStudentLists()
				}
			},
			async getStudentLists() {
				let res = await getStudentList({
					science_id: this.Id
				})
				if (res.code == 1) {
					console.log("学生列表", res)
					// this.studentData = res.data
					this.studentData = [...	this.studentData,...res.data]
					
					if (this.studentData.length > 0) {
						this.kongFlag = true
					} else {
						this.kongFlag = false
					}
				}
			},
			gotoSearch() {
				uni.navigateTo({
					url: '../../pages_teachers/search/index',
				})
			},
			gotoStudentdetail(id) {
				uni.navigateTo({
					url: `../../pages_teachers/studentDetail/index?id=${id}`
					// url:'../../pages_teachers/studentDetail/index'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		background-color: #F7F8FA;

	}




	.studenthome {
		height: 100100%;
		background-color: #F7F8FA;


		.itemone {
			width: 172rpx;
			height: 60rpx;
			background: #4A9CFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;

		}

		.selectedTearch {
			white-space: nowrap;
			width: 640rpx;

			.selectitemone {
				width: 100%;
				height: 240rpx;
				display: inline-block;
				background: #F7F8FA;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				
				.imgbox {
					width: 200rpx;
					height: 240rpx;
					// display: inline-block;
					float: left;

					.imgboximg {
						width: 200rpx;
						height: 240rpx;
						border-radius: 20rpx;
					}
				}

				.itemmessage {
					// flex: 1;
					width: 410rpx;
					height: 210rpx;
					float: left;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					z-index: 99999999999999;
					margin-top: 20rpx;
					margin-left: 20rpx;
					position: relative;
					// display: inline-block;

					.name {
						padding-right: 10rpx;
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 38rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;

						.nameleft {
							width: 230rpx;
							// background-color: pink;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.leibie {
							display: inline-block;
							width: 104rpx;
							height: 44rpx;
							background: #FE532D;
							border-radius: 0rpx 30rpx 0rpx 30rpx;
							opacity: 1;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 28rpx;
							text-align: center;
							line-height: 44rpx;
							position: absolute;
							top: -17rpx;
							right: -7rpx;
						}
					}


					.introduction {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						line-height: 30rpx;
						overflow: hidden;
						-webkit-line-clamp: 2;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
					}
				}

				.science {
					width: 100%;
					height: 60rpx;
					display: flex;

					.scienceitem {
						// width: 100%;
						height: 48rpx;
						background: #F0F7FF;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						opacity: 1;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #4A9CFF;
						line-height: 48rpx;
						margin-right: 10rpx;
						padding: 0 7rpx;
					}
				}
			}
		}


		.scroll-view_Hs {
			white-space: nowrap;
			width: 100%;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 20rpx;
		}

		.headerbg {
			width: 750rpx;
			height: 470rpx;
			background: linear-gradient(180deg, #4A9CFF 0%, rgba(74, 156, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: var(--status-bar-height);
			box-sizing: border-box;
			position: absolute;
			top: 0;

			.anquan {
				height: var(--status-bar-height);
			}

			.title {
				width: 750rpx;
				height: 65rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				padding-left: 30rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
			}

			.homebox {
				padding: 1rpx 30rpx;
				box-sizing: border-box;

				.searchbox {
					width: 690rpx;
					height: 80rpx;
					background: #FFFFFF;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					// margin-left:30rpx;
					margin-top: 10rpx;
					line-height: 80rpx;
					padding-left: 20rpx;
					padding-right: 4rpx;
					box-sizing: border-box;

					display: flex;
					justify-content: space-between;
					align-items: center;

					.searchtext {
						width: 156rpx;
						height: 72rpx;
						background: #4A9CFF;
						border-radius: 200rpx 200rpx 200rpx 200rpx;
						opacity: 1;
						display: inline-block;
						font-size: 30rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 42rpx;
						text-align: center;
						line-height: 72rpx;
					}
				}

				.selectTeacher {
					width: 690rpx;
					height: 364rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(206, 220, 237, 0.2);
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					opacity: 1;
					margin-top: 24rpx;
					padding: 30rpx;
					box-sizing: border-box;

					.title {
						font-size: 32rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #333333;
						line-height: 38rpx;
						padding-left: 0rpx;
					}

					.selectitem {
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						// justify-content: space-between;

						// .scroll-view_H {
						// 	display: flex;
						// }

						.kongingbox {
							width: 172rpx;
							height: 172rpx;

							.noselectimg {
								width: 100%;
								height: 100%;
							}
						}

						.mesaage {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 30rpx;
						}
					}
				}

				.tearchList {
					width: 100%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 20rpx;


					.tearchListitem {
						width: 336rpx;
						height: 562rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(206, 220, 237, 0.2);
						border-radius: 30rpx 30rpx 30rpx 30rpx;
						margin-bottom: 30rpx;
						// display: flex;


						.imgbox {
							width: 336rpx;
							height: 360rpx;

							.tearchtimg {
								width: 100%;
								height: 100%;
								border-radius: 30rpx 30rpx 30rpx 30rpx;
							}

						}

						.messagebox {
							width: 100%;
							height: 200rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							padding: 20rpx;
							box-sizing: border-box;

							.name {
								width: 100%;
								font-size: 32rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #333333;
								line-height: 50rpx;
								// margin-left: 20rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.zhicheng {
								font-size: 26rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								line-height: 40rpx;
								// margin-left: 20rpx;
							}

							. {
								display: flex;
								// width: 90%;
								white-space: nowrap;
								width: 100%;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;


								.zhichengitem {
									// padding: 0 3rpx;
									display: inline-block;
									height: 48rpx;
									background: #F0F7FF;
									border-radius: 12rpx 12rpx 12rpx 12rpx;
									font-size: 24rpx;
									font-family: PingFang SC-Regular, PingFang SC;
									font-weight: 400;
									color: #4A9CFF;
									line-height: 28rpx;
									text-align: center;
									line-height: 48rpx;
									margin-right: 10rpx;
									padding: 0 10rpx;
								}
							}
						}



					}

				}
			}

		}
	}


	.teacherhome {
		// width: 750rpx;
		height: 100vh;
		background-color: #F7F8FA;

	
         .selectedStudentscroll-view{
			 white-space: nowrap;
			 width: 640rpx;
			 .selecteditem {
				 margin-top: 20rpx;
			 	display: inline-block;
			 	width: 650rpx;
			 	height: 164rpx;
			 	background: #F7F8FA;
			 	border-radius: 30rpx 30rpx 30rpx 30rpx;
			 	opacity: 1;
				padding-top: 30rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
			 	// display: flex;
			 	// justify-content: space-between;
			 	// padding: 30rpx;
			 	// box-sizing: border-box;
			 
			 	.itemleft {
			      float: left;
				  display: flex;
			 		.avaterbox {
			 			.avatartimg {
			 				margin-right: 10rpx;
			 				width: 104rpx;
			 				height: 104rpx;
			 				border-radius: 100rpx;
			 
			 			}
			 		}
			 
			 		.nameandmessage {
			 			width: 200rpx;
			 			padding-top: 5rpx;
			 			box-sizing: border-box;
						margin-left: 10rpx;
			 
			 
			 			.name {
			 				font-size: 32rpx;
			 				font-family: PingFang SC-Bold, PingFang SC;
			 				font-weight: bold;
			 				color: #333333;
			 				line-height: 38rpx;
			 			}
			 
			 			.message {
			 				width: 340rpx;
			 				font-size: 26rpx;
			 				font-family: PingFang SC-Regular, PingFang SC;
			 				font-weight: 400;
			 				color: #666666;
			 				line-height: 30rpx;
			 				margin-top: 20rpx;
			 				white-space: nowrap;
			 				overflow: hidden;
			 				text-overflow: ellipsis;
			 			}
			 		}
			 
			 	}
			 
			 	.itemright {
					float: left;
			 		margin-left: 140rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
			 
			 		.baokao {
			 			font-size: 26rpx;
			 			font-family: PingFang SC-Regular, PingFang SC;
			 			font-weight: 400;
			 			color: #666666;
			 			line-height: 30rpx;
			 		}
			 
			 		. {
			 			height: 48rpx;
			 			background: #F0F7FF;
			 			border-radius: 12rpx 12rpx 12rpx 12rpx;
			 			opacity: 1;
			 			border: 2rpx solid #4A9CFF;
			 			font-size: 24rpx;
			 			font-family: PingFang SC-Regular, PingFang SC;
			 			font-weight: 400;
			 			color: #4A9CFF;
			 			line-height: 40rpx;
			 			text-align: center;
			 			line-height: 48rpx;
			 			padding: 0 7rpx;
						margin-top: 10rpx;
			 		}
			 	}
			 }
		 }
	



		.scroll-view_H {
			white-space: nowrap;
			width: 100vw;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			height: 74rpx;
			display: flex;
			margin-top: 20rpx;
		}

		.itemone {
			width: 172rpx;
			height: 60rpx;
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			opacity: 1;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			line-height: 60rpx;
			text-align: center;
			color: #333333;
			display: inline-block;
			margin-right: 20rpx;
		}

		.itemoned {
			background: #4A9CFF;
			color: #FFFFFF;
		}


		.headerbg {
			width: 750rpx;
			height: 420rpx;
			background: linear-gradient(180deg, #4A9CFF 0%, rgba(74, 156, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 120rpx;
			padding-left: 30rpx;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			z-index: 999;


			.title {
				width: 750rpx;
				height: 45rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;
				padding-left: 10rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 38rpx;
				z-index: 99;
			}

			.searchbox {
				width: 690rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				margin-top: 10rpx;
				line-height: 80rpx;
				padding-left: 20rpx;
				padding-right: 4rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.searchtext {
					width: 156rpx;
					height: 72rpx;
					background: #4A9CFF;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
					opacity: 1;
					display: inline-block;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 42rpx;
					text-align: center;
					line-height: 72rpx;
				}
			}
		}



		.homestudentbox {
			// padding: 1rpx 30rpx;
			box-sizing: border-box;



			.selectStudent {
				width: 690rpx;
				height: 288rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(206, 220, 237, 0.2);
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				opacity: 1;
				margin-top: 24rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 38rpx;
					z-index: 99;
				}

				.selectitem {
					width: 100%;
					// height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.kongingbox {
						width: 172rpx;
						height: 172rpx;

						.noselectimg {
							width: 100%;
							height: 100%;
						}
					}

					.mesaage {
						font-size: 26rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 30rpx;
					}
				}
			}

			.studentbox {
				width: 100%;
				// height: 300rpx;
				margin-top: 10rpx;

				.boxitem {
					width: 690rpx;
					height: 164rpx;
					background: #FFFFFF;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					margin-bottom: 30rpx;
					display: flex;
					justify-content: space-between;
					padding: 30rpx;
					box-sizing: border-box;

					.itemleft {
						display: flex;

						.avaterbox {
							.avatartimg {
								margin-right: 10rpx;
								width: 104rpx;
								height: 104rpx;
								border-radius: 100rpx;
							}
						}

						.nameandmessage {
							padding-top: 5rpx;
							box-sizing: border-box;

							.name {
								font-size: 32rpx;
								font-family: PingFang SC-Bold, PingFang SC;
								font-weight: bold;
								color: #333333;
								line-height: 38rpx;
							}

							.message {
								width: 360rpx;
								font-size: 26rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								line-height: 30rpx;
								margin-top: 20rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

					}

					.itemright {
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: space-between;

						.baokao {
							font-size: 26rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							line-height: 30rpx;
						}

						. {
							height: 48rpx;
							background: #F0F7FF;
							border-radius: 12rpx 12rpx 12rpx 12rpx;
							opacity: 1;
							border: 2rpx solid #4A9CFF;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #4A9CFF;
							line-height: 28rpx;
							text-align: center;
							line-height: 48rpx;
							padding: 0 7rpx;

						}
					}
				}
			}
		}

	}
</style>